<template>
  <div class="orderDetail">
    <showBanner class="white"></showBanner>
    <!-- 查看订单详情 -->
    <div class="containor">
      <div class="orderTitle">
        <div class="title">订单信息</div>
        <div class="titleRow">
          <span>订单编号：{{orderList.orderNum}}</span>
        </div>
        <div class="titleRow">
          <span>订单类型：</span>
          <span v-if="orderList.type===1">普通订单</span>
          <span v-if="orderList.type===2">特价订单</span>
          <span v-if="orderList.type===3">活动订单</span>
          <span v-if="orderList.type===4">分销订单</span>
        </div>
        <div class="titleRow">
          <span>订单状态：</span>
          <span v-if="orderList.status==='0'">未付款</span>
          <span v-if="orderList.status==='5'">已取消</span>
          <span v-if="orderList.status==='42'">未使用</span>
          <span v-if="orderList.status==='43'">部分使用</span>
          <span v-if="orderList.status==='44'">已使用</span>
          <span v-if="orderList.status==='45'">已失效</span>
        </div>
        <div class="titleRow">
          <span>产品内容：{{orderList.spaceTitle}}</span>
        </div>
        <div class="titleRow">
          <span>购买日期：{{orderList.createTime}}</span>
        </div>
        <div class="titleRow">
          <span>有效期：{{orderList.shootValidity}}</span>
        </div>
        <div class="titleRow">
          <span>订单金额：{{orderList.payMoney}}元</span>
        </div>
        <div class="titleRow">
          <span>分销佣金：{{orderList.brokerage}}元</span>
        </div>
        <div class="titleRow">
          <span>付款方式：</span>
          <span v-if="orderList.payType==='1'">账号余额</span>
          <span v-if="orderList.payType==='2'">支付宝</span>
          <span v-if="orderList.payType==='3'">微信</span>
          <span v-if="orderList.payType==='12'">账号余额加支付宝</span>
          <span v-if="orderList.payType==='13'">账号余额加微信</span>
        </div>
        <div class="titleRow">
          <span>客户姓名：{{orderList.userName}}</span>
        </div>
        <div class="titleRow">
          <span>联系方式：{{orderList.userTel}}</span>
        </div>
        <div class="titleRow">
          <span>预售券：</span>
          <span v-if="orderList.presaleStatus===0">未使用</span>
          <span v-if="orderList.presaleStatus===1">部分使用</span>
          <span v-if="orderList.presaleStatus===2">全部使用</span>
          <span v-if="orderList.presaleStatus===3">无预售券</span>
          <span v-if="orderList.presaleStatus===4">已失效</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import showBanner from '@/base/showBanner/showBanner'
import { mapGetters } from 'vuex'
export default {
  name: 'orderDetail',
  components: {
    showBanner
  },
  data () {
    return {
      orderList: {
        createTime: '',
        orderNum: '',
        payMoney: '',
        payType: '',
        shootValidity: '',
        spaceName: '',
        presaleStatus: '',
        status: '',
        type: '',
        userName: '',
        userTel: '',
        spaceTitle: '',
        brokerage: '',
        bookingVouchers: [
          {
            id: '',
            bookingNum: '',
            whetherCancel: ''
          }
        ]
      },
      show: true,
      isShow: 1,
      bookingNum: ''
    }
  },
  created () {
    this.getOrderDetail()
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  mounted () {
  },
  methods: {
    getOrderDetail () {
      this.$axios.post('/api/activity/getActivityOrderById', {
        id: this.$route.query.id,
        userId: this.userInfo.userId
      }).then(response => {
        const res = response.data
        if (res.code === '00000000') {
          let arr = res.data.orders
          let str = res.data.bookingVouchers
          // console.log(arr)
          this.orderList.createTime = arr.createTime
          this.orderList.orderNum = arr.orderNum
          this.orderList.shootValidity = arr.shootValidity
          this.orderList.spaceName = arr.spaceName
          this.orderList.spaceTitle = arr.spaceTitle
          this.orderList.status = arr.status
          this.orderList.storeState = arr.storeState
          this.orderList.type = arr.type
          this.orderList.userName = arr.userName
          this.orderList.userTel = arr.userTel
          this.orderList.brokerage = arr.brokerage
          this.orderList.payType = arr.payType
          this.orderList.payMoney = arr.payMoney
          this.orderList.presaleStatus = arr.presaleStatus
          let voucherList = []
          for (let i = 0; i < str.length; i++) {
            voucherList.push({
              id: str[i].id,
              bookingNum: str[i].bookingNum,
              whetherCancel: str[i].whetherCancel
            })
          }
          this.orderList.bookingVouchers = [...voucherList]
        }
      })
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.orderDetail
  margin 16px
  background #fff
  height 800px
  .containor
    padding 20px 16px 16px
    .orderActive
      border-bottom 1px solid transparent !important
    .orderTitle
      display flex
      flex-flow row wrap
      margin-bottom 20px
      padding 0 24px
      // border-bottom 1px solid #F2F6FC
      .title
        width 100%
        font-family PingFangSC-Medium
        font-size 16px
        line-height 50px
        font-weight 500
      .pretitle
        font-size 14px
        color rgba(0, 0, 0, 0.65)
      .subtitle
        font-size 14px
        margin-left 20px
        color rgba(0, 0, 0, 0.45)
      .titleRow
        width 30%
        font-size 14px
        margin-bottom 18px
        color #888888
        display flex
        flex-flow row nowrap
        align-items center
        .textColor
          color #444
      .titleRowpresale
        width 80%
        font-size 14px
        margin-bottom 18px
        color #888888
        display flex
        flex-flow wrap
        justify-content flex-start
        .presale
          // width 80%
          .num
            width 80px
            height 20px
            border 1px solid #DD6666
            border-radius 4px
            text-align center
            font-size 12px
            line-height 20px
            color #DD6666
            margin-left 20px
            margin-bottom 20px
        .active
          border 1px solid #666666!important
          color #666666!important
          text-decoration line-through
      .sub
        margin-left 68px
        margin-top 10px
</style>
